@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.step-section {
	.step-section__header {
		display: flex;
		align-items: center;
		margin-block-end: 16px;
		gap: 16px;

		@include break-large {
			gap: 8px;
		}

		.step-section__step-count {
			display: flex;
			justify-content: center;
			align-items: center;
			@include heading-small;
			background: var(--color-primary-50);
			width: 24px;
			border-radius: 50%;
			height: 24px;
			color: var(--color-text-inverted);
		}

		.step-section__step-heading {
			@include heading-large;
			text-wrap: pretty;
		}
	}
}
